<template>
  <div>
          <!-- 头部导航 -->
    <div id="tonglan">
      <div id="banxin">
        <div id="city">
          <h1>豆瓣同城</h1>
          <span>北京</span>
          <ul>
            <li>近期活动</li>
            <li>主办方</li>
            <li>舞台剧</li>
          </ul>
          <input type="text" placeholder="活动/舞台剧/地点" />
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'HeaderNav',
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
// 头部导航栏
#tonglan {
  width: 100%;
  height: 66px;
  background: #f6f5f2;
  margin: 0 0 40px;
  #banxin {
    width: 1040px;
    margin: 0 auto;
    height: 66px;

    #city {
      display: flex;
      line-height: 66px;
      h1 {
        font-size: 30px;
        color: #e85104;
      }
      ul {
        display: flex;
        width: 240px;
        height: 24px;
        padding-left: 20px;
        li {
          font-size: 15px;
          padding-right: 20px;
        }
      }
      input {
        margin: auto;
        margin-left: 422px;
        width: 210px;
        height: 28px;
      }
    }
  }
}
</style>